<template>
  <div>
    <div class="content">
      <!-- 列表 -->
      <el-table height="80.5vh" :data="HoldOrderList" style="width: 100%" :header-cell-style="{color:'black'}">
        <el-table-column label="编号" prop="id" min-width="100px" />
        <el-table-column label="订单名称" prop="name" min-width="100px" />
        <el-table-column label="订单类型" min-width="100px">
          <template v-slot="scope">{{ holdOrderStatusList[scope.row.order_type] }}</template>
        </el-table-column>
        <el-table-column label="删除时间" prop="del_at" min-width="100px" />
        <el-table-column label="创建时间" prop="created_at" min-width="100px" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="validation(scope.row.id)">恢复订单</el-button>
            <el-button type="text" @click="deleteoldOrderd(scope.row.id)">删除订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="dingwei">
        <el-pagination
          :current-page="query.page"
          :page-sizes="$arrays.tableSize"
          :page-size="query.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 暂存订单加载 -->
    <template>
      <el-table
        v-loading="loading"
        element-loading-text="正在校验商品数据"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        class="loading"
        :style="loading ? 'height:100%' : 'height:0'"
        body
      />
    </template>
    <!-- 价格变动对话框 -->
    <el-dialog
      title="票价变动提示"
      :visible.sync="pricesDialogVisible"
      width="30%"
      @close="loading=false"
    >
      <p>
        预订日期
        <span>{{ dateTime }}</span>日
      </p>
      <p>
        当前订单在预存是票价为
        <span style="color:#67C23A">{{ oldPrice }}</span>，最新票价为
        <span style="color:#F56C6C">{{ newprice }}</span>，出票时将以最新价格进行支付。
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pricesDialogVisible = false">取 消</el-button>
        <el-button class="el-button-right" type="primary" @click="toRouter()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 门票库存不足的提示 -->
    <el-dialog
      title="门票库存不足的提示"
      :visible.sync="ticketDialogVisible"
      width="30%"
      @close="loading=false"
    >
      <p>
        预订日期
        <span>{{ dateTime }}</span>日
      </p>
      <p>
        <span style="margin:0; margin-left:0; font-weight: normal;">系统检测到预订日期的门票库存已</span>
        <span style="color:#F56C6C;margin:0; margin-left:0">不足本次旅客数量</span>，请重新选择预订日期。
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ticketDialogVisible = false">取 消</el-button>
        <el-button class="el-button-right" type="primary" @click="toRouter()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getHoldOrderList,
  deleteoldOrderd,
  getHoldOrderdDtails
} from '@/api/holdOrder'
import { getTicket } from '@/api/travel'
export default {
  name: 'HoldOrderList',
  data() {
    return {
      HoldOrderList: [],
      query: {
        limit: 20,
        page: 1
      },
      total: 0,
      holdOrderStatusList: {
        TICKET: '门票',
        HOTEL: '酒店 ',
        SELF: '自营'
      },
      loading: false,
      pricesDialogVisible: false,
      ticketDialogVisible: false,
      dateTime: null,
      per_data: {
        price: null
      },
      oldPrice: null,
      newprice: null,
      routerObj: null
    }
  },
  created() {
    this.getHoldOrderList()
    // 获得全部数据
    getTicket().then((res) => {
      this.ticket = res.data.data.products
    })
  },
  methods: {
    getHoldOrderList() {
      getHoldOrderList(this.query).then((res) => {
        this.HoldOrderList = res.data.data.data
        this.total = res.data.data.total
      })
    },
    handleSizeChange(newPageSize) {
      this.query.limit = newPageSize
      this.getHoldOrderList()
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getHoldOrderList()
    },
    deleteoldOrderd(id) {
      deleteoldOrderd(id).then((res) => {
        this.$message({
          showClose: true,
          message: '删除成功',
          duration: 3000,
          type: 'success'
        })
        this.getHoldOrderList()
      })
    },
    // 效验数据
    validation(id) {
      // this.loading = true
      getHoldOrderdDtails(id).then((res) => {
        this.per_data = JSON.parse(res.data.data.per_data)

        // 判断票型
        console.log(JSON.parse(res.data.data.per_data))
        var number = null
        for (var key in this.ticket) {
          if (this.ticket[key].baseProduct.code === this.per_data.ticketEntity[0].code) {
            number = key
          }
        }
        console.log(number)
        if (number === null) {
          this.$message({
            showClose: true,
            message: '数据库中目前没有此票型',
            duration: 3000,
            type: 'warning'
          })
          this.loading = false
          return
        }

        // 根据日期获得最新票价
        const prices = this.ticket[number].baseProduct.prices
        const index = prices.findIndex((item) => {
          // console.log(item.datetime.substring(0, 10), this.per_data.ticketEntity[0].datetime.substring(0, 10))
          return item.datetime.substring(0, 10) === this.per_data.ticketEntity[0].datetime.substring(0, 10)
        })
        localStorage.setItem('products', JSON.stringify(this.ticket[number]))
        if (index < 0) {
          this.$message({
            showClose: true,
            message: '数据库中目前没有当前日期的数据',
            duration: 3000,
            type: 'warning'
          })
          this.loading = false
          return
        }

        this.dateTime = prices[index].datetime.slice(0, 10)

        this.newprice = prices[index].value.toFixed(2)

        this.oldPrice = this.per_data.ticketEntity[0].price
        this.routerObj = {}
        // 如果不价格相等
        // this.oldPrice = '98.00'
        //
        // 如果余票不够
        const value = this.ticket[number].baseProduct.stocks[0].stock
        // const value = 0
        console.log(this.newprice)
        if (value < this.per_data.ticketEntity[0].guest.length) {
          this.ticketDialogVisible = true
          this.routerObj = {
            name: 'issue',
            query: {
              id: id,
              price: this.newprice,
              time: this.dateTime,
              stusta: true,
              ticketCode: number
            }
          }
        } else {
          if (this.newprice !== this.oldPrice) {
            this.pricesDialogVisible = true
            this.routerObj = {
              name: 'issue',
              query: {
                id: id,
                price: this.newprice,
                time: this.dateTime,
                stusta: false,
                ticketCode: number
              }
            }
          } else {
            this.loading = false
            this.$router.push({
              name: 'issue',
              query: {
                id: id,
                price: this.newprice,
                time: this.dateTime,
                stusta: false,
                ticketCode: number
              }
            })
          }
        }
      })
    },
    // 跳转路由
    toRouter() {
      this.loading = false
      this.ticketDialogVisible = false
      this.pricesDialogVisible = false
      // this.$router.push(this.routerObj)
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 24px;
  .check {
    cursor: pointer;
    color: #5e9cff;
    margin-right: 5px;
  }
}
//暂存订单加载中
.loading {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
p {
  span {
    font-weight: bold;
    margin-left: 6px;
    margin-right: 6px;
  }
}
</style>
